<template lang="pug">
.cp-product-defect-popup
  el-dialog.defect-pop(
    :title="title",
    :visible="visible",
    @close="closeDialog",
    :close-on-click-modal="!isEdit",
    width="80%")
    el-form.defect-pop-form(:model="formData", :inline="true", label-width="90px")
      el-row(:gutter="20")
        el-col(:span="8")
          el-form-item(label="ID")
            el-input(v-model="formData.id", placeholder="自动生成", disabled)
        el-col(:span="16")
          el-form-item(label="标题")
            el-input(v-model="formData.title", placeholder="请输入标题", :disabled="!isEdit")
      el-row(:gutter="20")
        el-col(:span="8")
          el-form-item(label="状态")
            el-select(v-model="formData.status", :disabled="!isEdit")
              el-option(v-for="item in statusSelect", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="8")
          el-form-item(label="产品")
            el-select(v-model="formData.product", :disabled="!isEdit")
               el-option(v-for="item in productSelect", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="8")
          el-form-item(label="期望解决日期")
            el-date-picker(v-model="formData.expectDate", type="datetime", :disabled="!isEdit")
      el-row(:gutter="20")
        el-col(:span="8")
          el-form-item(label="转寄")
            el-select(v-model="formData.forward", :disabled="!isEdit")
              el-option(v-for="item in emptySelect", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="8")
          el-form-item(label="所属模块")
            el-select(v-model="formData.module", :disabled="!isEdit")
              el-option-group( v-for="group in moduleSelect", :key="group.name", :label="group.name")
                el-option(v-for="item in group.options", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="8")
          el-form-item(label="期望关闭日期")
            el-date-picker(v-model="formData.expectCloseDate", type="datetime", :disabled="!isEdit")
      el-row(:gutter="20")
        el-col(:span="8")
          el-form-item(label="指派人")
            el-select(v-model="formData.testLevel", placeholder="系统显示，不可更改", disabled)
              el-option(v-for="item in emptySelect", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="8")
          el-form-item(label="严重程度")
            el-select(v-model="formData.severity", :disabled="!isEdit")
              el-option(v-for="item in severitySelect", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="8")
          el-form-item(label="系统版本")
            el-input(v-model="formData.systemVersion", placeholder="请输入", :disabled="!isEdit")
      el-row(:gutter="20")
        el-col(:span="8")
          el-form-item(label="复现")
            el-select(v-model="formData.recurrent", :disabled="!isEdit")
              el-option(v-for="item in emptySelect", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="8")
          el-form-item(label="优先级")
            el-select(v-model="formData.priority", :disabled="!isEdit")
              el-option(v-for="item in prioritySelect", :key="item.value", :label="item.name", :value="item.value")
    el-tabs.defect-pop-tabs(v-model="activeTab")
      el-tab-pane(v-for="item in tabList", :label="item.name", :name="item.value", :key="item.value")
    .detail(v-show="activeTab == '0'")
      el-row(:gutter="20")
        el-col(:span="16")
          el-input(type="textarea", v-model="formData.desc", :rows="16", placeholder="描述", :disabled="!isEdit")
        el-col(:span="8")
          p 日志+备注
          el-input(type="textarea", v-model="formData.log", :rows="3", placeholder="输入", :disabled="!isEdit")
          ul
            li(v-for="(text, index) in formData.logList", :key="index") {{text}}
    .reason-table(v-show="activeTab == '1'")
      .table-title
        span 原因列表
        a.right-btn(v-if="!formData.reasonList || !formData.reasonList.length", @click="initReasonList") 初始化
      el-table.defect-pop-table(:data="formData.reasonList", border, height="200px")
        el-table-column(type="index", label="序号")
        el-table-column(show-overflow-tooltip, prop="content", label="内容")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.content}}
            div(v-show="scope.row.canEdit")
              el-input(v-model="scope.row.content")
        el-table-column(show-overflow-tooltip, prop="creator", label="创建人")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.creator}}
            div(v-show="scope.row.canEdit")
              el-input(v-model="scope.row.creator")
        el-table-column(show-overflow-tooltip, prop="creationTime", label="创建时间")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.creationTime}}
            div(v-show="scope.row.canEdit")
              el-input(v-model="scope.row.creationTime")
        el-table-column(label="操作", min-width="104px", fixed="right", v-if="isEdit")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit")
              i.icon-act.el-icon-edit(@click="editReasonList(scope.$index, scope.row)")
              i.icon-act.el-icon-plus(@click="addReasonList(scope.$index, scope.row)")
              i.icon-act.el-icon-delete(@click="deleteReasonList(scope.$index, scope.row)")
            div(v-show="scope.row.canEdit")
              i.icon-act.el-icon-check(@click="saveEditReasonList(scope.$index, scope.row)")
              i.icon-act.el-icon-close(@click="cancelEditReasonList(scope.$index, scope.row)")
    .affect-table(v-show="activeTab == '2'")
      .table-title
        span 影响列表
        a.right-btn(v-if="!formData.affectList || !formData.affectList.length", @click="initAffectList") 初始化
      el-table.defect-pop-table(:data="formData.affectList", border, height="200px")
        el-table-column(type="index", label="序号")
        el-table-column(show-overflow-tooltip, prop="content", label="内容")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.content}}
            div(v-show="scope.row.canEdit")
              el-input(v-model="scope.row.content")
        el-table-column(show-overflow-tooltip, prop="creator", label="创建人")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.creator}}
            div(v-show="scope.row.canEdit")
              el-input(v-model="scope.row.creator")
        el-table-column(show-overflow-tooltip, prop="creationTime", label="创建时间")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.creationTime}}
            div(v-show="scope.row.canEdit")
              el-input(v-model="scope.row.creationTime")
        el-table-column(label="操作", min-width="104px", fixed="right", v-if="isEdit")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit")
              i.icon-act.el-icon-edit(@click="editAffectList(scope.$index, scope.row)")
              i.icon-act.el-icon-plus(@click="addAffectList(scope.$index, scope.row)")
              i.icon-act.el-icon-delete(@click="deleteAffectList(scope.$index, scope.row)")
            div(v-show="scope.row.canEdit")
              i.icon-act.el-icon-check(@click="saveEditAffectList(scope.$index, scope.row)")
              i.icon-act.el-icon-close(@click="cancelEditAffectList(scope.$index, scope.row)")
    .solution(v-show="activeTab == '3'")
      .input-wrap 系统版本
        el-input(v-model="formData.version")
      el-input(type="textarea", v-model="formData.info", :rows="12", placeholder="请输入信息", :disabled="!isEdit")
    .test-case-table(v-show="activeTab == '4'")
      .table-title
        span 测试用例列表
        a.right-btn(type="text", @click="addTestCaseLink") 添加链接
      el-table.defect-pop-table(:data="formData.testCaseList", border, height="200px")
        el-table-column(show-overflow-tooltip, prop="id", label="ID")
        el-table-column(show-overflow-tooltip, prop="title", label="标题")
        el-table-column(show-overflow-tooltip, prop="module", label="所属模块")
        el-table-column(show-overflow-tooltip, prop="status", label="状态")
        el-table-column(label="操作", min-width="40px", fixed="right", v-if="isEdit")
          template(slot-scope="scope")
            i.icon-act.el-icon-delete(@click="delTestCaseLink(scope.$index, scope.row)")
    .test-case-table(v-show="activeTab == '5'")
      el-table.defect-pop-table(:data="formData.allLinkList", border, height="200px")
        el-table-column(show-overflow-tooltip, prop="type", label="类型")
        el-table-column(show-overflow-tooltip, prop="id", label="ID")
        el-table-column(show-overflow-tooltip, prop="title", label="标题")
        el-table-column(show-overflow-tooltip, prop="designator", label="指派人")
        el-table-column(show-overflow-tooltip, prop="status", label="状态")
    .test-case-table(v-show="activeTab == '6'")
      el-upload(
        class="upload-wrap"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :file-list="formData.fileList")
        el-button(type="primary") 上传
    .dialog-footer(slot="footer")
      el-button(type="primary", plain, @click="closeDialog") 取消
      el-button(type="primary", @click="saveBill", v-if="isEdit", :disabled="saving") 保存
      el-button(type="primary", @click="submitBill", v-if="isEdit", :disabled="submitting") 提交
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'prodefectpopup',
  components: {
  },
  props: {
    title: String,
    visible: Boolean,
    isEdit: Boolean,
    parentData: Object
  },
  data() {
    return {
      // 新建时初始数据
      formData: this.parentData,
      saving: false,
      submitting: false,
      // 下拉框选项
      statusSelect: [
        { name: '新建', value: '1' },
        { name: '待评审', value: '2' },
        { name: '已评审', value: '3' },
        { name: '已发布', value: '4' },
        { name: '已执行', value: '5' }
      ],
      productSelect: [
        { name: 'CT560', value: '1' }
      ],
      severitySelect: [
        { name: '致命', value: '1' },
        { name: '严重', value: '2' },
        { name: '中等', value: '3' },
        { name: '较小', value: '4' }
      ],
      emptySelect: [],
      moduleSelect: [{
        name: '系统',
        options: [{
          value: 'Q',
          name: '系统'
        }]
      }, {
        name: '模块A',
        options: [{
          value: 'A1',
          name: '模块A1'
        }, {
          value: 'A2',
          name: '模块A2'
        }]
      }, {
        name: '模块B',
        options: [{
          value: 'B1',
          name: '模块B1'
        }, {
          value: 'B2',
          name: '模块B2'
        }]
      }, {
        name: '模块C',
        options: [{
          value: 'C1',
          name: '模块C1'
        }, {
          value: 'C2',
          name: '模块C2'
        }]
      }],
      prioritySelect: [
        { name: '高', value: 'high' },
        { name: '中', value: 'mid' },
        { name: '低', value: 'low' }
      ],
      // tab
      activeTab: '0',
      tabList: [
        { name: '详细信息', value: '0' },
        { name: '原因', value: '1' },
        { name: '影响', value: '2' },
        { name: '解决方案', value: '3' },
        { name: '测试用例', value: '4' },
        { name: '所有链接', value: '5' },
        { name: '附件', value: '6' }
      ]
    };
  },
  computed: {
    ...mapGetters({})
  },
  watch: {
    parentData(newData, oldData) {
      if (newData !== oldData) {
        this.formData = newData;
        this.reasonListBC = newData.reasonList ? newData.reasonList.slice() : [];
        this.affectListBC = newData.affectList ? newData.affectList.slice() : [];
      }
    }
  },
  created() {
    // 缓存编辑表格数据
    this.reasonListBC = this.parentData.reasonList ? this.parentData.reasonList.slice() : [];
    this.affectListBC = this.parentData.affectList ? this.parentData.affectList.slice() : [];
  },
  methods: {
    // 关闭、取消
    closeDialog() {
      this.$emit('close');
    },
    // 保存
    saveBill() {
      if (this.saving) {
        return false;
      }
      this.saving = true;
      // const params = { ...this.formData };
      setTimeout(() => {
        if (Math.random() > 0.5) {
          this.$emit('submit', {});
          this.closeDialog();
          this.$message({ message: '保存成功', type: 'success' });
          this.saving = false;
        } else {
          this.$message.error('保存失败');
          this.saving = false;
        }
      }, 500);
    },
    // 提交
    submitBill() {
      if (this.submitting) {
        return false;
      }
      this.submitting = true;
      // const params = { ...this.formData };
      setTimeout(() => {
        if (Math.random() > 0.5) {
          this.$emit('submit', {});
          this.closeDialog();
          this.$message({ message: '提交成功', type: 'success' });
          this.submitting = false;
        } else {
          this.$message.error('提交失败');
          this.submitting = false;
        }
      }, 500);
    },
    /* 原因列表 */
    // 初始化
    initReasonList() {
      this.$set(this.formData, 'reasonList', [{ canEdit: true }]);
      this.reasonListBC = [{ canEdit: true, fromAdd: true }];
    },
    // 编辑
    editReasonList(index) {
      this.reasonListBC[index] = Object.assign({}, this.formData.reasonList[index]);
      this.$set(this.formData.reasonList[index], 'canEdit', true);
    },
    // 添加
    addReasonList(index) {
      this.formData.reasonList.splice((index + 1), 0, { canEdit: true });
      this.reasonListBC.splice((index + 1), 0, { canEdit: true, fromAdd: true });
    },
    // 删除
    deleteReasonList(index) {
      this.formData.reasonList.splice(index, 1);
      this.reasonListBC.splice(index, 1);
    },
    // 保存
    saveEditReasonList(index) {
      this.formData.reasonList[index].canEdit = false;
    },
    // 取消保存
    cancelEditReasonList(index) {
      const cache = Object.assign({}, this.reasonListBC[index], { canEdit: false });
      if (cache.fromAdd) {
        this.formData.reasonList.splice(index, 1);
        this.reasonListBC.splice(index, 1);
      } else {
        this.formData.reasonList.splice(index, 1, cache);
        this.formData.reasonList[index].canEdit = false;
      }
    },
    /* 影响列表 */
    // 初始化
    initAffectList() {
      this.$set(this.formData, 'affectList', [{ canEdit: true }]);
      this.affectListBC = [{ canEdit: true, fromAdd: true }];
    },
    // 编辑
    editAffectList(index) {
      this.affectListBC[index] = Object.assign({}, this.formData.affectList[index]);
      this.$set(this.formData.affectList[index], 'canEdit', true);
    },
    // 添加
    addAffectList(index) {
      this.formData.affectList.splice((index + 1), 0, { canEdit: true });
      this.affectListBC.splice((index + 1), 0, { canEdit: true, fromAdd: true });
    },
    // 删除
    deleteAffectList(index) {
      this.formData.affectList.splice(index, 1);
      this.affectListBC.splice(index, 1);
    },
    // 保存
    saveEditAffectList(index) {
      this.formData.affectList[index].canEdit = false;
    },
    // 取消保存
    cancelEditAffectList(index) {
      const cache = Object.assign({}, this.affectListBC[index], { canEdit: false });
      if (cache.fromAdd) {
        this.formData.affectList.splice(index, 1);
        this.affectListBC.splice(index, 1);
      } else {
        this.formData.affectList.splice(index, 1, cache);
        this.formData.affectList[index].canEdit = false;
      }
    },
    // 测试用例添加链接
    addTestCaseLink() {
      this.formData.testCaseList.push({ id: '123678', title: '采集流程控制', result: '通过', status: '已发布' });
    },
    // 删除测试用例
    delTestCaseLink(index) {
      this.formData.testCaseList.splice(index, 1);
    },
    // 附件上传
    deleteRefer(row, index) {
      console.log(row, index);
    },
    // 删除
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 预览
    handlePreview(file) {
      console.log(file);
    },
    // 删除之前
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>

<style lang="sass">
$SEARCHHEIGHT: 104px
$SELECTWIDTH: 100px
.cp-product-defect-popup
  .el-table
    th, td
      text-align: center
  .defect-pop
    &::-webkit-scrollbar
      display: none
    .el-dialog
      margin-top: 5vh!important
    .el-dialog__footer
      text-align: center
      padding-top: 0
      .el-button
        width: 80px
  .defect-pop-form
    .el-form-item
      width: 100%
      height: 34px
      margin-right: 0
    .el-form-item__label
      text-align: left
    .el-form-item__content
      min-width: 120px
      width: calc(100% - 90px)
    .el-select, .el-date-editor.el-input
      width: 100%
  .defect-pop-tabs
    height: 52px
    .el-tabs__header
      background-color: #fff
      margin-bottom: 10px
    .el-tabs__item:focus.is-active.is-focus:not(:active)
      box-shadow: none
    .el-tabs__nav-wrap::after
      background-color: #fff
  .table-title
    margin: 0 0 10px 0
    .right-btn
      padding-left: 16px
      color: #5D9BFB
  .input-wrap
    margin-bottom: 10px
    .el-input
      width: 200px
      padding-left: 16px
  .defect-pop-table
    .icon-act
      font-size: 16px
      font-weight: 500
      padding: 4px
      cursor: pointer
      &:hover
        color: #5D9BFB
</style>
